<!--  -->
<template>
  <div class="message_container">
    <div class="title">消息</div>
    <div class="menu_tab">
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
        <el-menu-item index="1" @click="changeIndex('1')">私信</el-menu-item>
        <el-menu-item index="2" @click="changeIndex('2')">评论</el-menu-item>
        <el-menu-item index="3" @click="changeIndex('3')">@我</el-menu-item>
        <el-menu-item index="4" @click="changeIndex('4')">通知</el-menu-item>
      </el-menu>
    </div>

    <PrivateVue class="all" v-show="activeIndex === '1'"></PrivateVue>
    <UserComment class="all" v-show="activeIndex === '2'"></UserComment>
    <UserForwards class="all" v-show="activeIndex === '3'"></UserForwards>
    <UserNotices class="all" v-show="activeIndex === '4'"></UserNotices>
  </div>
</template>

<script>
import PrivateVue from '../../../components/content/message/Private.vue'
import UserComment from '../../../components/content/message/UserComment.vue'
import UserForwards from '../../../components/content/message/UserForwards.vue'
import UserNotices from '../../../components/content/message/UserNotices.vue'

export default {
  name: 'Message',
  components: {
    PrivateVue,
    UserComment,
    UserForwards,
    UserNotices
  },
  data() {
    return {
      activeIndex: '2'
    }
  },
  methods: {
    changeIndex(index) {
      this.activeIndex = index
    }
  }
}
</script>

<style scoped lang='less'>
.message_container {
  padding: 0 20px;
  //   padding-top: 80px;
  width: 320px;
  height: calc(100vh - 135px);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.3);
  overflow-y: scroll;
  scrollbar-width: none;
}
.message_container::-webkit-scrollbar {
  display: none;
}
.title {
  z-index: 99;
  font-size: 20px;
  font-weight: 600;
  width: 100%;
  position: fixed;
  margin-bottom: 20px;
  padding: 20px 0;
  background-color: #fff;
}
.el-menu-demo {
  margin-top: 4%;
  // width: 100%;
  position: fixed;
  z-index: 99;
  border: 1px solid rgb(182, 176, 176);
  border-radius: 20px;
  width: 320px;
  display: flex;
  justify-content: space-evenly;
  /deep/.el-menu-item {
    flex: 1;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 20px;
    border-bottom: none;
    border-radius: 20px;
    color: rgb(83, 81, 81);
    font-size: 13px;
  }
  /deep/.el-menu-item:hover {
    background-color: rgba(184, 178, 178, 0.918);
    color: #fff;
  }
  /deep/.el-menu-item:focus,
  /deep/.el-menu-item.is-active {
    background-color: rgba(184, 178, 178, 0.918);
    color: #fff;
    border-bottom: none;
  }
}
.all {
  margin-top: 92px;
}
</style>